<template>
  <div class="app-container" v-loading="pageLoading">
    <researchs :pressButtonControl="pressButtonControl" @createItem="createItem" v-if="basicInfoShow"
      @research="research">
      <template v-slot:firstLine>
        <el-input style="width: 260px;" placeholder="输入设备/编码按回车" clearable class="filter-item"
          @keyup.enter.native="research" @clear="research" v-model="query.machine_code">
        </el-input>
        <el-cascader v-model="query.machine_type_id" filterable style="width: 260px;" placeholder="设备类型" clearable
          class="filter-item" @keyup.enter.native="research" @clear="research" :props="MachineTypeProps"
          :options="MachineType">
        </el-cascader>
      </template>
      <template v-slot:moreSearch>
        <div class="filter-container">
          <el-select v-model="query.plant_id" style="width: 260px;" clearable class="filter-item" filterable remote
            reserve-keyword placeholder="请输入工厂" :remote-method="getPlant">
            <el-option v-for="item in PlantOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>

          <el-select v-model="query.line_id" style="width: 260px;" clearable class="filter-item" filterable remote
            reserve-keyword placeholder="请输入线体" :remote-method="getLine">
            <el-option v-for="item in lineOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-input style="width: 260px;" placeholder="请输入制造商" clearable class="filter-item"
            @keyup.enter.native="research" @clear="research" v-model="query.manufacturer">
          </el-input>

          <el-select v-model="query.supplier_id" style="width: 260px;" clearable class="filter-item" filterable remote
            reserve-keyword placeholder="请输入供应商" :remote-method="getsupplier">
            <el-option v-for="item in vendorOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>

          <el-select v-model="query.custodian" style="width: 260px;" clearable class="filter-item" filterable remote
            reserve-keyword placeholder="请输入管理人" :remote-method="getpersonnel">
            <el-option v-for="item in personnelOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select placeholder="选择状态" class="filter-item" v-model="query.status">
            <el-option v-for="(item,index) in deviceStatus" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </template>
    </researchs>
    <z-table :list="list" ref="multipleTable" :tableProps="tableProps" :columns="columns"
      @selection-change='selectionChange'>
      <template v-slot:content="v">
        <span v-if="v.key == 'machine_status'" class="text-label"
          :style="{background:v.row[v.key]==1?'#67c23a':v.row[v.key]==4?'#e6a23c':'f56c6c'}">
          {{getMatchingData(v.row[v.key],'machine_status')}}
        </span>
        <span v-else>{{ v.row[v.key] }}</span>
      </template>
      <template v-slot:operation='v'>
        <a href="javascript:;" class="text-green" v-if="basicInfoShow" @click.stop="goDetail(v.row)">设备详情</a>
        <a href="javascript:;" class="text-blue" @click.stop="editItem(v.row)">编辑</a>
        <a href="javascript:;" class="text-red" @click.stop="deleteItem(v.row)">删除</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getLists"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>

  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import researchs from '@/views/tpm/components/research.vue'
import { deleteChildren } from '@/utils/index.js'
export default {
  name: 'basicInfo',
  mixins: [commonMixin],
  components: { researchs },
  props: {
    basicInfoShow: {
      type: Boolean,
      default: true,
    },
    addDeviceShow: {
      type: Boolean,
      default: false,
    },
    machine_code: {
      type: String,
      default: '',
    },
    deviceIDData: {
      type: Array,
      default: function () {
        return []
      },
    },
  },
  data() {
    return {
      // 按钮控制
      pressButtonControl: {
        researchs: true, //查询
        exportData: true, // 导出
        more: true, // 更多
        Reset: false, // 重置
        createItems: true, // 创建
      },
      query: {
        machine_code: '',
        page: 1,
        size: 10,
      },
      postForList: true,
      name: '设备信息',
      api: this.$api.tpmMachin,
      baseUrl: this.$api.baseUrl,
      tableProps: {
        border: true,
        opsColWith: 160,
        fixed: false,
        hideOperations: false,
      },
      list: [],
      // 设备类型数据
      MachineType: [],
      // 供应商数据
      vendorOptions: [],
      // 人员数据
      personnelOptions: [],
      // 工厂数据
      PlantOptions: [],
      // 线体数据
      lineOptions: [],
      MachineTypeProps: {
        label: 'machine_type_name',
        value: 'id',
        children: 'child',
        emitPath: false,
      },
      columns: [
        { title: '设备类型', key: 'machine_type_name', width: 100 },
        { title: '设备编号', key: 'machine_code', width: 100 },
        { title: '设备名称', key: 'machine_name', width: 100 },
        { title: '设备规格型号', key: 'machine_description', width: 100 },
        { title: '设备出厂编号', key: 'factory_number', width: 140 },
        { title: '制造商', key: 'manufacturer', minWidth: 80 },
        { title: '供应商', key: 'vendor_name', width: 80 },
        { title: '设备状态', key: 'machine_status', width: 100 },
        { title: '签收人', key: 'signed_by', width: 80 },
        { title: '签收日期', key: 'signed_date', width: 100 },
        { title: '管理人', key: 'custodian', width: 80 },
        { title: '登记日期', key: 'register_date', width: 100 },
        { title: '所属工厂', key: 'plant_name', width: 100 },
        { title: '所属线体', key: 'line_name', width: 100 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改时间', key: 'modify_time', width: 100 },
      ],
      fields: [
        {
          title: '设备类型',
          key: 'machine_type_id',
          span: 12,
          name: 'cascader',
          required: true,
          props: {
            filterable: true,
            checkStrictly: true,
            props: {
              children: 'child',
              value: 'id',
              label: 'machine_type_name',
              emitPath: false,
            },
          },
          options: [],
        },

        {
          title: '设备名称',
          key: 'machine_name',
          span: 12,
          required: true,
        },
        { title: '设备规格型号', key: 'machine_description', span: 12 },
        { title: '设备出厂编号', key: 'factory_number', span: 12 },
        { title: '制造商', key: 'manufacturer', span: 12 },
        {
          title: '供应商',
          key: 'supplier_id',
          span: 12,
          name: 'select',
          options: [],
          props: { filterable: true, remote: true, clearable: true, 'remote-method': this.getsupplier },
        },
        {
          title: '签收人',
          key: 'signed_by',
          span: 12,
          name: 'select',
          options: [],
          props: { filterable: true, remote: true, clearable: true, 'remote-method': this.getpersonnel },
        },
        { title: '签收日期', key: 'signed_date', span: 12, name: 'date' },
        {
          title: '管理人',
          key: 'custodian',
          span: 12,
          name: 'select',
          options: [],
          props: { filterable: true, remote: true, clearable: true, 'remote-method': this.getpersonnel },
        },
        { title: '登记日期', key: 'register_date', span: 12, name: 'date' },
        {
          title: '所属工厂',
          key: 'plant_id',
          span: 12,
          name: 'select',
          options: [],
          props: { filterable: true, remote: true, clearable: true, 'remote-method': this.getPlant },
        },
        {
          title: '所属线体',
          key: 'line_id',
          span: 12,
          name: 'select',
          options: [],
          props: { filterable: true, remote: true, clearable: true, 'remote-method': this.getLine },
        },
      ],
      // 设备状态
      deviceStatus: [
        {
          value: 1,
          label: '正常',
        },
        {
          value: 4,
          label: '停用',
        },
        {
          value: 5,
          label: '报废',
        },
      ],
    }
  },
  computed: {},
  watch: {
    basicInfoShow: {
      immediate: true,
      handler(val, old) {
        if (!val) {
          this.tableProps = {
            border: true,
            opsColWith: 160,
            fixed: false,
            // highlightCurrentRow: true,
            hideOperations: true,
          }
          this.query.machine_code = this.machine_code
        }
      },
    },
    addDeviceShow: {
      immediate: true,
      handler(val, old) {
        if (val) {
          this.tableProps = {
            border: true,
            opsColWith: 160,
            fixed: false,
            hideOperations: true,
            selection: {
              showSelection: true,
            },
          }
          ;(this.pressButtonControl = {
            researchs: true, //查询
            exportData: false, // 导出
            more: true, // 更多
            Reset: false, // 重置
            createItems: false, // 创建
          }),
            this.toggleRowSelections()
        } else {
          this.clearSelection()
        }
      },
    },
  },
  created() {
    // 获取设备信息
    this.research()
    // 获取设备类型
    this.getMachineType()
    // 获取供应商
    this.getsupplier()
    this.getpersonnel()
    this.getPlant()
    this.getLine()
  },
  mounted() {},

  methods: {
    // // 多选默认选中
    toggleRowSelections() {
      setTimeout(() => {
        this.deviceIDData.forEach((row) => {
          let tmp = this.list.find((item) => item.id === row)
          this.$refs.multipleTable.$refs.elTable.toggleRowSelection(tmp, true)
        })
      }, 200)
    },
    clearSelection() {
      this.$nextTick(() => {
        this.$refs.multipleTable.$refs.elTable.clearSelection()
      })
    },
    // 切换分页
    getLists() {
      if (this.addDeviceShow) {
        this.toggleRowSelections()
        this.getList()
      } else {
        this.getList()
      }
    },
    getMachineType() {
      this.$request(this.baseUrl + 'Tpm/MachineType/GetTreeList').then((r) => {
        let tmp = deleteChildren(r, 'child')
        this.MachineType = tmp
        let tmpMa = this.fields.find((i) => i.key == 'machine_type_id')
        tmpMa.options = tmp
      })
    },
    // 获取匹配数据
    getMatchingData(val, code) {
      if (code == 'machine_status') {
        let tmp = this.deviceStatus.find((i) => i.value == val)
        return tmp ? tmp.label : ''
      }
    },
    submit() {
      this.submitLoading = true
      this.$request(this.api + 'add', this.data, 'post')
        .then((r) => {
          this.$message.success('操作成功')
          this.editFormVisible = false
          this.getList()
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    // 点击查看详情
    goDetail(v) {
      this.$router.push({
        name: 'deviceDetails',
        query: {
          code: v.machine_code,
          name: v.machine_name,
        },
      })
    },
    // 获取供应商
    getsupplier(val) {
      let Params = {
        queryString: val ? val : '',
        page: 1,
        size: 100,
      }
      this.$request(this.baseUrl + 'MasterData/vendor/getList', Params).then((r) => {
        const { list } = r
        this.vendorOptions = list.map((i) => ({
          label: i.vendor_full_name,
          value: i.id,
        }))
        this.getFieldConfig('supplier_id').options = this.vendorOptions
      })
    },
    // 获取人员
    getpersonnel(val) {
      let Params = {
        queryString: val ? val : '',
        page: 1,
        size: 100,
      }
      this.$request(this.baseUrl + 'platform/user/getList', Params).then((r) => {
        const { list } = r
        this.personnelOptions = list.map((i) => ({
          label: `${i.userid} ${i.username}`,
          value: i.userid,
        }))
        this.getFieldConfig('signed_by').options = this.personnelOptions
        this.getFieldConfig('custodian').options = this.personnelOptions
      })
    },
    // 获取工厂
    getPlant(val) {
      let Params = {
        queryString: val ? val : '',
        page: 1,
        size: 100,
      }
      this.$request(this.baseUrl + 'MasterData/plant/getList', Params).then((r) => {
        const { list } = r
        this.PlantOptions = list.map((i) => ({
          label: `${i.plant_code} ${i.plant_name}`,
          value: i.id,
        }))
        this.getFieldConfig('plant_id').options = this.PlantOptions
      })
    },
    // 获取线体
    getLine(val) {
      let Params = {
        queryString: val ? val : '',
        page: 1,
        size: 100,
      }
      this.$request(this.baseUrl + 'MasterData/line/getListbypage', Params).then((r) => {
        const { list } = r
        this.lineOptions = list.map((i) => ({
          label: `${i.line_code} ${i.line_name}`,
          value: i.id,
        }))
        this.getFieldConfig('line_id').options = this.lineOptions
      })
    },
    // 选择设备
    selectionChange(val) {
      let machineIds = []
      val.forEach((i) => {
        if (i) {
          machineIds.push(i.id)
        }
      })
      this.$emit('add-deviceData', machineIds)
    },
  },
}
</script>

<style lang="less" scoped></style>